<template>
  <view>
    <!-- 遮罩层 -->
    <view 
      class="popup-mask" 
      v-if="show" 
      @click.stop="close"
    ></view>
    
    <!-- 弹出层内容 -->
    <view 
      class="popup-content" 
      :class="{ 'popup-show': show }"
    >
      <view class="popup-header">
        <text class="popup-title">{{ title }}</text>
        <text class="popup-close" @click.stop="close">×</text>
      </view>
      <view class="popup-body">
        <slot></slot>
      </view>
      <view class="popup-footer" v-if="showFooter">
        <button class="popup-btn cancel" @click="close">取消</button>
        <button class="popup-btn confirm" @click="confirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false);
      this.$emit('close');
    },
    confirm() {
      this.$emit('confirm');
      this.close();
    }
  }
}
</script>

<style>
@import url('./css/popup.css');
</style>